// 路由基本使用
import React from 'react'
import ReactDOM from 'react-dom'
import {
  BrowserRouter,
  Link,
  Routes,
  Route,
  Outlet,
  useNavigate,
  useParams,
} from 'react-router-dom'

class Edu extends React.Component {
  render() {
    return (
      <div>
        <div>教育频道</div>
        <Link to="/edu/en">英语</Link>
        <Link to="/edu/cn">汉语</Link>

        {/* 路由填充位置 */}
        <Outlet />
      </div>
    )
  }
}

class Tech extends React.Component {
  render() {
    return <div>科技</div>
  }
}

class En extends React.Component {
  render() {
    return <div>英语频道</div>
  }
}

class Cn extends React.Component {
  render() {
    return <div>汉语频道</div>
  }
}

function Login() {
  // 实现编程式导航跳转
  const navigate = useNavigate()
  const handleLogin = () => {
    // 点击实现登录：获取表单数据，调用接口并传参
    // 接收返回的结果，判断登录是否成功
    const ret = {
      token: 'hello',
    }
    if (ret.token) {
      // 跳转到主页面
      // V5的用法
      // this.props.history.push('/edu')
      navigate('/edu')
    }
  }
  return (
    <div>
      <div>登录功能</div>
      <div>
        用户名：
        <input type="text" name="" id="" />
      </div>
      <div>
        密码：
        <input type="text" name="" id="" />
      </div>
      <div>
        <button onClick={handleLogin}>登录</button>
      </div>
    </div>
  )
}

function Users() {
  return (
    <div>
      <div>用户列表</div>
      <hr />
      <Link to="/users/123">张三</Link>
      <Link to="/users/456">李四</Link>
      {/* 路由填充位置 */}
      <Outlet />
    </div>
  )
}

function UserInfo() {
  // 获取动态路由的参数
  const params = useParams()
  // 用户列表数据
  const list = [
    {
      id: '123',
      uname: '张三',
      age: 12,
    },
    {
      id: '456',
      uname: '李四',
      age: 13,
    },
  ]
  const info = list.find((item) => item.id === params.id)
  return (
    <div>
      <div>用户详细信息:{info.uname + '的年龄是' + info.age}</div>
    </div>
  )
}

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <div>router-v6-基本使用</div>
          <hr />
          {/* 路由链接 */}
          <Link to="/edu">教育</Link>
          <Link to="/tech">科技</Link>

          {/* 路由映射，路由填充位 */}
          <Routes>
            <Route path="/edu" element={<Edu />}>
              <Route path="en" element={<En />} />
              <Route path="cn" element={<Cn />} />
            </Route>
            <Route path="/tech" element={<Tech />} />
            <Route path="/login" element={<Login />} />
            <Route path="/users" element={<Users />}>
              <Route path=":id" element={<UserInfo />} />
            </Route>
          </Routes>
        </div>
      </BrowserRouter>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))
